import {css} from "./core.js";

export let initToastr = function(globalVarName = 'Ztoastr') {

    let className = "ztoast";

    (function(root, factory) {
        root[globalVarName] = factory();
    }(globalThis, function() {
        let obj =  {};
        let toastr = {
            position : 'top-right',
            message: function(text, {status = 'success', timeout = 3000} = {}) {
                // var status = status || 'success';
                // var timeout = timeout || 3000;
                if (typeof obj === 'undefined') {
                    obj = {}
                }
                let id = document.getElementsByClassName(className).length;
                let wrapper = document.createElement('div');
                wrapper.classList.add(className, status);
                let textWrap = document.createElement('span');
                textWrap.classList.add('text');
                textWrap.innerText = text;
                wrapper.appendChild(textWrap);
                let icon = document.createElement('span');
                icon.classList.add('icon');
                icon.innerHTML = this.getIcon(status);
                wrapper.addEventListener('click', function(e) {
                    document.getElementById(className + '-wrap').removeChild(
                        wrapper);
                    clearTimeout(obj[id])
                });
                wrapper.appendChild(icon);

                wrapper.classList.add(className + '-show');
                function transitionEnd() {
                    wrapper.classList.remove(className + '-show')
                    wrapper.removeEventListener('animationend', transitionEnd);
                }
                wrapper.addEventListener('animationend', transitionEnd)

                if (document.getElementById(className + '-wrap')) {
                    wrapper.style.setProperty('--item-index', [...document.getElementsByClassName(className)].length)
                    document.getElementById(className + '-wrap').appendChild(wrapper);

                } else {
                    let elem = document.createElement('div');
                    elem.id = className + "-wrap";
                    elem.classList.add(className + '-wrap',this.position);
                    elem.appendChild(wrapper);
                    elem.style.setProperty('--item-index', 0)
                    document.body.appendChild(elem);
                }

                let leaveCls = className + '-leave'
                let toastcontainer = document.getElementById(className + '-wrap');
                obj[id] = setTimeout(function() {
                    wrapper.classList.add(leaveCls);
                    wrapper.addEventListener('animationend', function(e) {
                        wrapper.classList.remove(leaveCls);
                        toastcontainer.removeChild(wrapper);
                        if (!document.getElementsByClassName(className)[0]) {
                            obj = undefined;
                            document.body.removeChild(toastcontainer);
                        } else {
                            [...document.getElementsByClassName(className)].forEach((v, i) => {
                                v.style.setProperty('--item-index', i)
                            })
                        }
                    })
                }, timeout);

            },
            setPosition:function(position){
                this.position = position;
            },
            getIcon: function(status) {
                var icon = '';
                switch (status) {
                    case 'success':
                        icon = '&#10004;';
                        break;
                    case 'error':
                        icon = '&#x2715;';
                        break;
                    case 'info':
                        icon = '&#8505;';
                        break;
                    case 'warning':
                        icon = '&#9888;';
                        break;
                }
                return icon;
            }
        };

        ['success', 'error', 'info', 'warning'].forEach(method => {
            toastr[method] = function (str = '', options = {}) {
                 toastr.message(str, {
                     status: method,
                     ...options,
                 })
            }
        })
        return toastr;
    }));



    let newcss =
        css`
        @keyframes ${className}-fade-in {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 0.8;
            }
        }

        @keyframes ${className}-fade-ot {
            0% {
                opacity: 0.8;
            }
            100% {
                opacity: 0;
            }
        }
        
    .${className}-wrap {
        position: fixed;
        z-index: 1000000;
        --item-index: 0;
    }

    .${className}-wrap .${className} {
        z-index: 999999;
        position: relative;
        //margin: 30px auto;
        border-radius: 4px;
        font-size: 16px;
        color: #ffffff;
        opacity: 0.8;
        padding: 7px 16px;
        width: fit-content;
        cursor: pointer;
        transition: transform linear .5s;
        transform: translate(0, calc(var(--item-index) * 20px));
    }

    .${className}-wrap .${className}-show {
        animation-name: ${className}-fade-in;
        animation-duration: .5s;
    }

    .${className}-wrap .${className}-leave {
        animation-name: ${className}-fade-ot;
        animation-duration: .5s;
    }
            
    .${className}-wrap .${className}:hover,
    .${className}-wrap .${className}:focus {
        opacity: 1;
    }

    .${className}-wrap.top-center {
        top: 30px;
        right: 0;
        width: 100%;
    }

    .${className}-wrap.bottom-center {
        bottom: 0;
        right: 0;
        width: 100%;
    }

    .${className}-wrap.top-left {
        top: 20px;
        left: 20px;
    }

    .${className}-wrap.bottom-left {
        bottom: 12px;
        left: 12px;
    }

    .${className}-wrap.top-right {
        top: 12px;
        right: 12px;
    }

    .${className}-wrap.bottom-right {
        right: 12px;
        bottom: 12px;
    }

    .${className}-wrap.top-left .${className},
    .${className}-wrap.bottom-left .${className} {
        margin-left: inherit;
    }

    .${className}-wrap.top-right .${className},
    .${className}-wrap.bottom-right .${className} {
        margin-right: inherit;
    }

    .${className}-wrap .${className}.success {
        background-color: var(--z-color-success, #07d824);
    }

    .${className}-wrap .${className}.error {
        background-color: var(--z-color-error, #f11b1b);
    }

    .${className}-wrap .${className}.warning {
        background-color: var(--z-color-warning, #f4c015);
    }

    .${className}-wrap .${className}.info {
        background-color: var(--z-color-info, #068bdc);
    }

    .${className}-wrap .${className} .icon {
        float: left;
        padding-right: 10px;
    }
    `;


    let stylesheet = new CSSStyleSheet();
    stylesheet.replaceSync(newcss);
    document.adoptedStyleSheets.push(stylesheet);
}